import Vue from 'vue'  //引入vue

import 'normalize.css/normalize.css'  //'normalize.css 是一个 CSS 文件，使不同浏览器中元素的默认样式更加一致。
 //导入element-ui库
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // 配置中文语言包

import '@/styles/index.scss' //定义全局 CSS 样式

import App from './App'  //导入主应用组件
import store from './store' //导入 Vuex 状态管理库的配置：管理应用的状态
import router from './router'  //引入路由组件

import '@/icons' // 导入图标相关的配置或组件
import '@/permission' //导入权限控制相关的配置或功能


// if (process.env.NODE_ENV === 'production') {  //如果是生产环境
//   const { mockXHR } = require('../mock')
//   mockXHR()    //调用 mockXHR 函数，通常用于模拟网络请求或进行某些测试。
// }  //打包的时候要注释掉了

// 使用element-ui库
Vue.use(ElementUI)
// 如果想要英文版 element-ui，按如下方式声明
//Vue.use(ElementUI, { locale }); // 配置为英文

Vue.config.productionTip = false//这行代码用于关闭 Vue 在生产环境下的提示信息。

//注册定义指令 控制功能权限
Vue.directive('permission', {
  inserted(el, binding) {
    console.log(el, binding);
    //el是当前指令作用的dom元素的对象
    //binding是v-premission="表达式"的信息
    const points = store.state.user.userInfo?.roles?.points || []//当前用户信息的操作权
    //拿到了points
    //points中是否有add-empolyee
    //binding.value 是v-permission="表达式"中表达的值
    if (!points.includes(binding.value)) {
      //删除或者禁用
      // el.remove()
      el.disabled = true //禁用
    }
  }
})
new Vue({
  el: '#app',   //el: 指定 Vue 实例要挂载到的 DOM 元素。在这个例子中，'#app' 是一个选择器，表示 Vue 实例将挂载到 ID 为 app 的元素上。
  router,  //vue可以管理路由
  store,  //vue可以管理状态
  render: h => h(App)  //渲染app组件
})
//这段代码的目的是初始化一个 Vue 应用，将其挂载到 DOM 中的 #app 元素，同时配置了路由和状态管理。
// 通过 render 函数，指定了根组件 App 的渲染方式。这是一个典型的 Vue 应用的配置方式。
